<template>
	<view class="commoditysearch" :style="{
      background: datas.backgroundColor,
      border: `1px solid ${datas.backgroundColor}`,
    }">
		<!-- 搜索框 -->
		<section @click="to_nav" class="searchs" :style="{
        height: datas.heights + 'px',
        'justify-content': datas.textPosition === 0 ? 'left' : 'center',
        background: datas.borderColor,
        'border-radius': datas.borderRadius === 0 ? '0px' : '50rpx',
      }">
			<view class="search-left">
				<i name="search" size="16" :style="{ color: datas.textColor }" />
				<text :style="{ color: datas.textColor }">{{datas.text}}</text>
			</view>
			<!-- 扫一扫 -->
			<view class="sweep" v-show="datas.sweep" :style="{ color: datas.textColor }">
				<text>扫一扫</text>
			</view>
		</section>

	</view>
</template>

<script>
	export default {
		name: 'commoditysearch',
		props: {
			datas: {
				type: Object,
				default: () => {
					return {
						text: '搜索',
						heights: 28, //搜索栏高度
						position: 0, //显示位置
						sweep: false, // 显示扫一扫
						borderRadius: 0, //框体样式
						textPosition: 0, //文本位置
						backgroundColor: 'rgb(249, 249, 249)', //背景颜色
						borderColor: 'rgb(255, 255, 255)', //框体颜色
						textColor: 'rgb(150, 151, 153)', //字体颜色
						hotords: [], //热词
					}
				}
			}
		},
		methods: {
			to_nav() {
				this.$boya.msg('敬请期待')
			},
		},
	}
</script>

<style scoped lang="less">
	.commoditysearch {
		position: relative;

		/* 搜索框 */
		.searchs {
			position: relative;
			width: 345px;
			min-height: 28px;
			margin: 5px auto;
			display: flex;
			align-items: center;
			font-size: 14px;

			.search-left {
				display: flex;
				align-items: center;
			}

			.sweep {
				position: absolute;
				right: 10px;
			}

			i {
				margin: 0 5px;
			}
		}
	}
</style>